<template>
	<view class="container">
		<carHeader style="padding:10rpx;"
		  :title="'订单详情'"></carHeader>
		
		<view class="info">
			<view class="one">
				<view>
					<text  space="nbsp">核销码 {{items.verCode}}
					</text>
				</view>
				<view>
					<text class="content">
						车辆：{{items.carBrand.cbName}}{{items.carInfo.type}}/{{items.carInfo.carNum}}
					</text>
				</view>
			</view>
			
			<view class="one" >
				<view>
					<text >服务内容</text>
				</view>
				<view v-for="(item,index) in form" :key="index">
					<text class="content" >
						{{item.serviceDetails.name}}
					</text>
					<text class="detail">
					 {{item.serviceDetails.presentPrice}}
					 </text>
				</view>
			</view>
			
			<view class="one" style="border-bottom: none;">
				<view>
					<text >订单信息</text>
				</view>
				
				<view>
					<text class="content" >
						原价
					</text>
					<text class="detail">￥{{items.prePrice}}</text>
				</view>
				
				<view>
					<text class="content" >
						优惠
					</text>
					<text class="detail" >￥{{items.prePrice-items.payPrice}}</text>
				</view>
				
				<view>
					<text class="content" >
						实付金额
					</text>
					<text class="detail" >￥{{items.payPrice}}</text>
				</view>
				
				<view>
					<text class="content" >
						订单编号
					</text>
					<text class="detail" >
					{{id}}
					</text>
				</view>
				
				<view>
					<text class="content" >
						预约时间
					</text>
					<text class="detail" >{{items.orderTime}}</text>
				</view>
				
				<view>
					<text class="content" >
						支付时间
					</text>
					<text class="detail" >{{items.createTime}}</text>
				</view>
				
				<view>
					<text class="content" >
						核销时间
					</text>
					<text class="detail" >{{items.verificationTime}}</text>
				</view>
				
			</view>
		</view>
		
		
		<view class="btn">
			<u-button @click="dialogToggle('info')"
			:disabled="items.verificationStatus===1"
			type="primary" 
			:color="items.verificationStatus===1 ? '#808080' : '#0662E6'"
			shape="circle" 
			>
			{{items.verificationStatus===1 ? '已核销' : '确认核销'}}</u-button>
			<!-- <view v-else>已核销</view> -->
		</view>
		 
		
		
		<view>
		<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
				:type="msgType"
				cancelText="取消" 
				confirmText="确认" 
				title="核销此订单" 
				content="请您仔细核对订单,此操作不可撤销请谨慎操作!" 
				@confirm="dialogConfirm"
				@close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:{
					carBrand:'',
					carInfo:'',
					serviceDetails:''
				},
				form:[],
				vertificationTime:'',
				msgType:"info",
				isVerified:false,
				id:''
			};
		},
		onLoad(options) {
			const id = options.orderDetailsId;
			console.log("id:",id);
			this.id=id;
			uni.request({
				url:'http://localhost:8080/carShop/carShop/orderDetails/byId?orderDetailsId='+this.id,
				success: (res) => {
					this.items = res.data
					console.log(res)
				}
			})
		},
		onShow() {
			uni.request({
				url:'http://localhost:8080/carShop/carShop/serviceDetails/name?orderDetailsId='+this.id,
				success: (res) => {
					this.form = res.data
					console.log(res)
				}
			})
		},
		methods:{
			dialogToggle(type) {
				this.msgType = type
				console.log(type);
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				 // 获取当前时间并更新注销时间  
				const now = new Date();  
				this.verificationTime = now; 
				console.log(this.verificationTime+"------");
				uni.request({
					url: `http://localhost:8080/carShop/carShop/updateVerification/byId?orderDetailsId=${this.id}&verificationTime=${encodeURIComponent(this.verificationTime)}`,
					success: (res) => {
						if(res.statusCode==200){
							this.refreshData();
						}
					}
				})
				this.isVerified=true;
			},
			refreshData(){
				uni.request({
					url:'http://localhost:8080/carShop/carShop/orderDetails/byId?orderDetailsId='+this.id,
					success: (res) => {
						this.items = res.data
						console.log(res)
					}
				})
			},
			dialogClose() {
				console.log('点击关闭')
			}
		}
	}
</script>

<style lang="scss">
	
	.info{
		background-color: white;
		height: 1100rpx;
		width: 95%;
		position: absolute;
		top: 150rpx;
		left: 20rpx;
		border-radius: 20rpx;
		z-index: 1
	}
	.btn{
		margin: 930rpx auto;
		width: 70%;
	}
	.one{
		margin: 50rpx 30rpx;
		border-bottom: 5px solid #F9F9F9;
		view{
			margin-bottom: 30rpx;
			.content{
				font-size: 13px;
			}
			.detail{
				font-size: 13px;
				float: right;
			}
		}
	}
	

</style>
